<template>
    <div class="login-wrapper">
        <div class="logo">
            <img src="../assets/编组 3@3x.png" alt="">
        </div>
        <div class="modal">

            <div class="modal_item">
                <el-form ref="userForm" :model="user" status-icon :rules="rules">
                    <div class="title">用户登录</div>
                    <el-form-item prop="userName" style="margin-bottom:30px;">
                        <el-input type="text" prefix-icon="el-icon-user" v-model="user.userName" placeholder="请输入账号" />
                    </el-form-item>
                    <el-form-item prop="userPwd">
                        <el-input type="password" prefix-icon="el-icon-view" v-model="user.userPwd" placeholder="请输入密码" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" class="btn-login" @click="login">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
    import storage from "./../utils/storage";
    export default {
        name: "login",
        data() {
            return {
                user: {
                    userName: "",
                    userPwd: "",
                },
                rules: {
                    userName: [{ required: true, message: "请输入用户名", trigger: "blur", }, ],
                    userPwd: [{ required: true, message: "请输入密码", trigger: "blur", }, ],
                },
            };
        },
        methods: {
            login() {
                this.$refs.userForm.validate((valid) => {
                    if (valid) {
                        this.$api.login(this.user).then(async (res) => {
                            // 登录成功保存 登录信息 到浏览器缓存中
                            this.$store.commit("saveUserInfo", res);
                            await this.loadAsyncRoutes();
                            this.$router.push("/welcome");
                        });
                    } else {
                        return false;
                    }
                });
            },
            // 获取用户权限对应的菜单
            async loadAsyncRoutes() {
                // 拿到登录用户的信息
                let userInfo = storage.getItem("userInfo") || {};
                // 有token的情况下去获取权限
                if (userInfo.token) {
                    try {
                        const { menuList } = await this.$api.getPermissionList();
                        // 生成路由
                        let routes = utils.generateRoute(menuList);
                        routes.map((route) => {
                            let url = `./../views/${route.component}.vue`;
                            route.component = () => import(url);
                            this.$router.addRoute("home", route);
                        });
                    } catch (error) {}
                }
            },
        },
    };
</script>

<style lang="scss">
    .login-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #f9fcff;
        width: 100vw;
        height: 100vh;
        background: url("../assets/bg.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;

        .logo {
            img {
                width: 1000px;
                margin-bottom: 20px;
            }
        }

        .modal {
            position: relative;
            width: 950px;
            height: 800px;
            padding: 50px;
            background-color: #fff;
            border-radius: 4px;
            background: url("../assets/1.png");
            background-size: contain;
            background-repeat: no-repeat;

            .modal_item {
                width: 30%;
                position: absolute;
                right: 10%;
                top: 100px;
            }

            .title {
                line-height: 1.5;
                text-align: center;
                margin-bottom: 70px;
                font-family: zihun59hao-chuangcuhei;
                font-size: 26px;
                color: #3d75ef;
                letter-spacing: 1.72px;
                text-align: center;
            }

            .btn-login {
                margin-top: 30px;
                width: 100%;
                border-radius: 20px;
                background: #3d75ef;
                border-radius: 24px;
            }
        }
    }
</style>